<template>
  <n-radio-group v-bind="attrs">
    <n-radio-button v-for="(item, index) in options" :key="index" :value="item.value">
      {{ item.label }}
    </n-radio-button>
  </n-radio-group>
</template>
<script setup lang="jsx">
import { useAppStore } from '@/store'
defineOptions({
  name: 'MyTab',
})
defineProps({
  options: {
    type: Array,
    default: () => [],
  },
})
const attrs = useAttrs()
const appStore = useAppStore()
const disabledSplitorColor = computed(() => (appStore.isDeep ? '#2c89b2' : '#b6b0f1'))
</script>
<style lang="scss" scoped>
:deep() .n-radio-group__splitor:has(+ .n-radio-button--disabled) {
  background: v-bind('disabledSplitorColor') !important;
}
</style>
